class details {
    constructor() {
        this.getdet()
        //放大镜的方法

    }
    getdet() {
        //获取跳转过来的商品ID
        let goodsId = localStorage.getItem('goodId')
        // console.log(goodsId);
        // let goodsId = url.split('=')[1]-0
        // let gg = 3
        // console.log(goodsId)
        // axios.get('http://localhost:8888/goods/list').then(res=>{
        //     // console.log(res)
        // })
        axios.get('http://localhost:8888/goods/item?id=' + goodsId).then(res => {

            // console.log(res)
            let { status, data } = res;
            let goodsInfo = data.info;

            // console.log(goodsInfo)


            if (status != 200 && data.code != 1) throw new Error('获取数据失败');
            let html = '';
            html = `<div class="preview_wrap fl">
        <div class="preview_img">
            <img src="${goodsInfo.img_big_logo}" width="100%" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="${goodsInfo.img_big_logo}" width="800px" alt="" class="bigimg">
            </div>
        </div>
        <div class="preview_list">
            <a href="javascript:;" class="arrow_prev"><</a>
            <a href="javascript:;" class="arrow_next">></a>
            <ul class="list_item">
                <li class="current"><img src="${goodsInfo.img_big_logo}" alt="" width="56px"></li>
                <li><img src="${goodsInfo.img_big_logo}" alt="" width="56px"></li>
                <li><img src="${goodsInfo.img_big_logo}" alt="" width="56px"></li>
                
            </ul>
        </div>
    </div>
    <div class="itemInfo_wrap fr">
                    <div class="sku_name">
                    ${goodsInfo.title}
                    </div>
                    <div class="news">
                        购买1-50件时享受单件价￥4758，超出数量以结算价为准
                    </div>
                    <div class="summary">
                        <dl class="summary_price">
                            <dt>闪购价</dt>
                            <dd>
                                <i class="price">${goodsInfo.current_price}</i> 
                                <a href="#">降价通知</a>
                                <div class="remark">累计评价51万+</div>
                            </dd>
                        </dl>
                        <dl class="summary_promotion">
                            <dt>促销</dt>
                            <dd>
                                <em>加购价</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品 详情》
                            </dd>
                        </dl>
                        <dl class="summary_support">
                            <dt>支持</dt>
                            <dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd>
                        </dl>
                        <dl class="summary_stock">
                            <dt>配送至</dt>
                            <dd>
                                北京海淀区中关有货 支持 99元免运费 |货到付款 |211限时达
                                <br>由自营发货，并提供售后服务。11:00前完成下单，预计今天（11月19日）送达
                            </dd>
                        </dl>
                        <dl class="choose_color">
                            <dt>选择颜色</dt>
                            <dd>
                                <a href="javasript:;" class="current">天空之境</a>
                                <a href="javasript:;">亮黑色</a>
                                <a href="javasript:;">极光色</a>
                                <a href="javasript:;">赤茶橘</a>
                                <a href="javasript:;">珠光贝母</a>
                                <a href="javasript:;">嫣紫色</a>
                                <a href="javasript:;">墨玉蓝</a>
                            </dd>
                        </dl>
                        <dl class="choose_version">
                            <dt>选择版本</dt>
                            <dd>
                                <a href="javascript:;" class="current">公开版</a>
                                <a href="javascript:;">移动4G</a>
                            </dd>
                        </dl>
                        <dl class="choose_version">
                            <dt>内存容量</dt>
                            <dd>
                                <a href="javascript:;" class="current">8G+218G</a>
                                <a href="javascript:;">8G+256G</a>
                                <a href="javascript:;">8G+512G</a>
                            </dd>
                        </dl>
                        <dl class="choose_type">
                            <dt>购买方式</dt>
                            <dd>
                                <a href="javascript:;" class="current">官方标配</a>
                                <a href="javascript:;">移动优惠购</a>
                                <a href="javascript:;">电信优惠购</a>
                            </dd>
                        </dl>
                        <dl class="choose_type">
                            <dt>套餐</dt>
                            <dd>
                                <a href="javascript:;" class="current">保护套餐</a>
                                <a href="javascript:;">充电套餐</a>
                            </dd>
                        </dl>
                        <div class="choose_btns">
                            <div class="choose_amount">
                                <input type="text" value="1">
                                <a href="javascript:;" class="add">+</a>
                                <a href="javascript:;" class="reduce">-</a>
                            </div>
                            <a href="cart.html" class="addCar">加入购物车</a>
                        </div>`

            this.$('.product_intro').innerHTML = html;
            this.search()
        })

        //    console.log(this.$('.product_intro'));

    }

    ///放大镜
    search() {

        let small = this.$('.preview_img')
        // console.log(small);
        let mask = this.$('.mask')
        // console.log(mask);
        let big = this.$('.big')
        let bigimg = this.$('.bigimg')
        // console.log(big,bigimg);
        //鼠标移入事件

        small.onmouseover = function () {
            mask.style.display = 'block'
            big.style.display = 'block'
        }
        small.onmouseout = function () {
            mask.style.display = 'none'
            big.style.display = 'none'
        }
        small.onmousemove = function (event) {


            //mask移动的最大距离
            let maxLeft = small.offsetWidth - mask.offsetWidth
            let maxTop = small.offsetHeight - mask.offsetHeight

            let cx = event.pageX;
            let cy = event.pageY;
            // console.log(cx,cy);
            let boxLeft = small.offsetLeft;
            let boxTop = small.offsetTop;

            // console.log(boxLeft, boxTop);
            let tmpx = cx - boxLeft - mask.offsetWidth / 2;
            let tmpy = cy - boxTop - mask.offsetHeight / 2;

            // console.log(tmpx,tmpy);
            //设置边界值
            if (tmpx < 0) tmpx = 0;
            if (tmpy < 0) tmpy = 0;
            if (tmpx > maxLeft) tmpx = maxLeft;
            if (tmpy > maxTop) tmpy = maxTop;


            mask.style.left = tmpx + 'px'
            mask.style.top = tmpy + 'px'

            // console.log(tmpx,tmpy);
            let maxImgleft = bigimg.offsetWidth - big.offsetWidth;
            let maxImgtop = bigimg.offsetHeight - big.offsetHeight;
            console.log(maxImgleft, maxImgtop);

            let imgLeft = tmpx / maxLeft * maxImgleft;
            let imgTop = tmpy / maxTop * maxImgtop;

            console.log(imgLeft, imgTop);

            bigimg.style.top = -imgTop + 'px';
            bigimg.style.left = -imgLeft + 'px';
        }

    }





    $(ele) {
        let res = document.querySelectorAll(ele)
        return res.length == 1 ? res[0] : res
    }
}
new details;